<template>
    <div class="c-progress">
        <PauseOutlined :style="{fontSize: props.fontSize,cursor:'pointer'}" @click="stopPlay" v-if="isStart && props.history"/>
        <!-- <CaretRightOutlined  :style="{fontSize: '20px',cursor:'pointer'}" v-if="!isStart" @click="startPlay"/> -->
        <a-slider style="width: 100%;" :tip-formatter="null" :min="0" v-if="props.history"   :max="100"  v-model:value="percentMy"  />
        <span style="margin-left: 20px;" v-if="props.showPerText && props.history"   >{{ props.violationTime }}</span>
        <ArrowsAltOutlined :style="{fontSize:  props.fontSize,cursor:'pointer'}" v-if="props.fontSize == '22px'"  @click="fullscreen"   />
        <ShrinkOutlined :style="{fontSize:  props.fontSize,cursor:'pointer'}" v-else  @click="exitFullScreen"  />
    </div>
</template>
<script setup>
import { defineProps, ref, computed, onMounted, defineEmits, watchEffect ,toRefs,watch} from 'vue'
import {PauseOutlined,CaretRightOutlined,ArrowsAltOutlined,ShrinkOutlined}from '@ant-design/icons-vue'
import dayjs from 'dayjs';
// 使用了element的颜色
const colorTable = {
    success: '#13ce66',
    fail: '#ff4949',
    warning: '#e6a23c',
    default: '#409EFF'
}
const emit = defineEmits(['percentChange','startPlay','stopPlay','fullscreen']);
const slider = ref(null);
const progress = ref(null);
let sliderLeft = ref(0);
let progressWidth = ref(0);//进度条长度
let tempPercent = ref(0);//百分比
// let disabled = ref(false)
const props = defineProps({
    percent: {
        type: Number,
        default: 60
    },
    showPerText: {
        type: Boolean,
        default: true
    },
    // 进度条的宽度
    width: {
        type: Number,
        default: 300
    },
    violationTime: {
        type: String,
        default: ''
    },
    isStart:{
        type: Boolean,
        default: true
    },
    fontSize:{
        type: String,
        default: '22px'
    },
    history:{
        type: Boolean,
        default: true
    }
})
const stopPlay = () =>{
    emit('stopPlay')
}
const fullscreen = ()=>{
    emit('fullscreen')
}
const exitFullScreen = ()=>[
    emit('exitFullScreen')
]
const startPlay = () =>{
    emit('startPlay')
}
const { percent,isStart } = toRefs(props)
// //设置进度条的背景样式
//先用自己的属性
const percentMy = ref(0)
const toggle = (newVal) => (percentMy.value = newVal)
//监测showDrawer触发visibleD
watch(
  () => percent.value,
  (newVal) => {
    toggle(newVal)
  }
)
//监测visibleD触发showDrawer的变值方法
watch(
  () => percentMy.value,
  (newVal) => {
     if(newVal<100){
        emit('percentChange', newVal)
     }
     if(newVal == 100){
        // disabled.value = true;
     }
    
  }
)
// const handleChange =(value) =>{
//     console.log("数据",value);
//     emit('percentChange', value)
// }
onMounted(() => {
    
})
 
</script>
<style lang="less" scoped>
.c-progress {
    @width: 300px;
    @radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    span {
        margin-left: 5px;
        font-size: 14px;
        color: #fff;
    }

    .c-progress-outer {
        width: @width;
        height: 10px;
        border-radius: @radius;
        background: #ebeef5;
        position: relative;
        display: flex;
        align-items: center;

        .c-progress-inner {
            width: 100px;
            height: 10px;
            background: #409EFF;
            border-radius: @radius;
        }

        .c-progress-slider {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 1px solid #409EFF;
            position: absolute;
            z-index: 10;
            left: 10px;
        }
    }
}
</style>